<template>
	<view id="info">
<!-- 		<u-sticky bgColor="#fff">
			<u-tabs :list="list1" :itemStyle="{ 'width': '33.3333%', 'height': '44px', 'padding': '0' }" @click="onTab">
			</u-tabs>
		</u-sticky>
		<u-line></u-line> -->
		<view class="info-time">
			<u-icon name="arrow-left"></u-icon>
			<text class="datetime" @click="show = true">{{datetime}}</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="info-content">
			<u-collapse accordion>
				<u-collapse-item :title="`扬尘超标(${raiseCnt})`">
					<view class="list-wrap">
						<view class="list-item" v-for="item in raiseList" :key="item.id" @click="onDetail(item.id)">{{ item.alertTitle }}</view>
					</view>
					<view class="loadmore">
						<text v-if="raiseList.length > queryParam.pageSize" @click="loadmore(1)">加载更多</text>
					</view>
				</u-collapse-item>
				<u-collapse-item :title="`噪声超标(${noiseCnt})`">
					<view class="list-wrap">
						<view class="list-item" v-for="item in noiseList" :key="item.id" @click="onDetail(item.id)">{{ item.alertTitle }}</view>
					</view>
					<view class="loadmore">
						<text v-if="noiseList.length > queryParam.pageSize" @click="loadmore(2)">加载更多</text>
					</view>
				</u-collapse-item>
				<u-collapse-item :title="`裸土未覆盖(${ltCnt})`">
					<view class="list-wrap">
						<view class="list-item" v-for="item in ltList" :key="item.id" @click="onDetail(item.id)">{{ item.alertTitle }}</view>
					</view>
					<view class="loadmore">
						<text v-if="noiseList.length > queryParam.pageSize" @click="loadmore(3)">加载更多</text>
					</view>
				</u-collapse-item>
				<u-collapse-item :title="`车辆未冲洗(${washCnt})`">
					<view class="list-wrap">
						<view class="list-item" v-for="item in washList" :key="item.id" @click="onDetail(item.id)">{{ item.alertTitle }}</view>
					</view>
					<view class="loadmore">
						<text v-if="washList.length > queryParam.pageSize" @click="loadmore(4)">加载更多</text>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="datetime" mode="date" closeOnClickOverlay
			@cancel="show = false" @close="show = false" @confirm="onConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	import { getWarnList2 } from '@/api/warn'
	import { getChildren } from '@/api/global'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	export default {
		data() {
			return {
				areaId: uni.getStorageSync(AREA_ID),
				queryParam: {
					startTime: '',
					endTime: '',
					areaIds: '',
					pageSize: 10,
					pageNum: 1,
					orderBy: 'id desc'
				},
				show: false,
				datetime: new Date().toISOString().slice(0, 10),
				washCnt: 0,
				washList: [],
				ltCnt: 0,
				ltList: [],
				raiseCnt: 0,
				raiseList: [],
				noiseCnt: 0,
				noiseList: []
			}
		},
		onLoad(option) {
			// this.queryParam.projectId = option.id
		},
		mounted() {
			this.queryParam.startTime = this.datetime
			this.queryParam.endTime = this.datetime
			this.getInit()
		},
		methods: {
			getInit () {
				uni.showLoading({
					title: '数据加载中'
				})
				const app = this
				const areaIds = []
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					app.queryParam.areaIds = areaIds.join(',')
				}).finally(() => {
					const params1 = {}
					params1['alertType'] = 1
					getWarnList2(Object.assign(this.queryParam, params1)).then(res => {
						app.raiseCnt = res.data.total
						app.raiseList = app.raiseList.concat(res.data.rows)
					})
					const params2 = {}
					params2['alertType'] = 3
					getWarnList2(Object.assign(this.queryParam, params2)).then(res => {
						app.noiseCnt = res.data.total
						app.noiseList = app.noiseList.concat(res.data.rows)
					})
					const params3 = {}
					params3['alertType'] = 5
					getWarnList2(Object.assign(this.queryParam, params3)).then(res => {
						app.ltCnt = res.data.total
						app.ltList = app.ltList.concat(res.data.rows)
					})
					const params4 = {}
					params4['alertType'] = 0
					getWarnList2(Object.assign(this.queryParam, params4)).then(res => {
						app.washCnt = res.data.total
						app.washList = app.washList.concat(res.data.rows)
					})
					uni.hideLoading()
				})
			},
			onConfirm(value) {
				this.datetime = value
				this.queryParam.startTime = this.datetime
				this.queryParam.endTime = this.datetime
				this.show = false
				this.getInit()
			},
			onDetail (id) {
				uni.navigateTo({
					url: '/packageE/warn/infodetail?id=' + id
				})
			},
			loadmore (type) {
				if (type === 1) {
					const params1 = {}
					this.queryParam.pageNum++
					params1['alertType'] = 1
					getWarnList2(Object.assign(this.queryParam, params1)).then(res => {
						app.raiseList = app.raiseList.concat(res.data.rows)
					})
				}
				if (type === 2) {
					const params2 = {}
					this.queryParam.pageNum++
					params2['alertType'] = 3
					getWarnList2(Object.assign(this.queryParam, params2)).then(res => {
						app.noiseList = app.noiseList.concat(res.data.rows)
					})
				}
				if (type === 3) {
					const params3 = {}
					this.queryParam.pageNum++
					params3['alertType'] = 5
					getWarnList2(Object.assign(this.queryParam, params3)).then(res => {
						app.ltList = app.ltList.concat(res.data.rows)
					})
				}
				if (type === 4) {
					const params4 = {}
					this.queryParam.pageNum++
					params4['alertType'] = 0
					getWarnList2(Object.assign(this.queryParam, params4)).then(res => {
						app.washList = app.washList.concat(res.data.rows)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#info {
		.info-time {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 200upx;
			.datetime {
				margin: 0 10upx;
			}
		}
		.info-content {
			.list-wrap {
				.list-item {
					padding: 15upx 0;
					border-bottom: 1px solid #eee;
				}
			}
			.loadmore {
				display: flex;
				align-items: center;
				justify-content: center;
				color: $u-primary
			}
		}
	}
</style>
